<template>
  <div>
    <impress :width="1920" :height="1080" ref="impress">
      <component v-for="item in pages" :key="item.name" :is="item.name"></component>
    </impress>
    <aside class="app__control">
        <ul>
          <li @click="overview($event)">预览</li>
          <li @click="goIndex">首页</li>
        </ul>
    </aside>
  </div>

</template>

<script>
import Impress from "../components/Impress.vue"
// 页面导入
import pages from "./index.js"

import {mapActions,mapState} from 'vuex'
export default {
  name: 'App',
  components: {
    Impress,
    ...pages
  },
  computed: {
    pages() {
      return pages
    },
    pageList() {
      let count = 0
      let res = []
      for(let item in pages) {
        res.push({
          name: item.name,
          index: count++
        })
      }
      return res
    },
    ...mapState(['impress'])
  },
  mounted() {
    const impress = this.$refs['impress']
    if (impress) {
      this.setImpress(impress.getImpressInstance())
    } else {
      this.$nextTick(() => {
        this.setImpress(impress.getImpressInstance())
      })
    }
  },
  methods: {
    ...mapActions(['setImpress']),
    overview(event) {
      event.stopPropagation()
      this.impress.goto(this.pageList.length - 1)
    },
    goIndex() {
      this.impress.tear()
      this.$router.replace({name:"guide"})
    }
  }
}
</script>